{% extends "index.html" %}

{% block content %}

	<div class="row">
		<div class="col-xs-12">
										<a href="/addServer/?id={{vmServer.id}}">
											<botton class="btn btn-primary  pull-right" data-toggle="modal" data-target="#myAddUserModal">
											<i class="icon-arrow-right icon-plus"></i>
													新增用户
											</botton>	
										</a>									
										
										
										<h3 class="header smaller lighter blue">
											<i class="icon-hand-right icon-animated-hand-pointer blue"></i>
											用户列表
										</h3>
										<div class="table-header">
											当前注册的用户
										</div>
										<div class="table-responsive">
											<table id="sample-table-2" class="table table-striped table-bordered table-hover">
												<thead>
													<tr>
														<th >
															<label>
																<input type="checkbox" class="ace" />
																<span class="lbl"></span>
															</label>
															用户名
														</th>
														<th>邮箱地址</th>
														<th>超级管理员</th>
														

														<th>
															<i class="icon-time bigger-110 hidden-480"></i>
															最后登录
														</th>

														<th class="hidden-480">注册日期</th>
														<th class="hidden-480">是否激活</th>
														<th class="col-sm-2">操作</th>
													</tr>
												</thead>

												<tbody>
												{% for ds in userList %}
													<tr>
														<td >
															<label>
																<input type="checkbox" class="ace" />
																<span class="lbl"></span>
																<a href="/user/auth/{{ds.id}}/">
																	{{ ds.username }}
																</a>
															</label>														
															
														</td>

														<td>
															{{ ds.email }}
														</td>
														
														<td class="hidden-480">	
															{% if ds.is_superuser == 1 %}
																<span class="label label-success arrowed">
																	是
																</span>
															{% else %}
																<span class="label label-danger arrowed-in">
																	否
																</span>												
															{% endif %}														
														</td>
																														
														
														
														<td>
															{{ ds.last_login|date:"Y/m/d H:i:s" }}
															
														</td>
														<td class="hidden-480">
															{{ ds.date_joined|date:"Y/m/d H:i:s" }}														
															
														</td>
														<td class="hidden-480">	
															{% if ds.is_active == 1 %}
																<span class="label label-success arrowed">
																	已激活
																</span>
															{% else %}
																<span class="label label-danger arrowed-in">
																	未激活
																</span>												
															{% endif %}														
														</td>
														<td>
															<div class="visible-md visible-lg hidden-sm hidden-xs action-buttons">
																<div class="btn-group">
																	<button data-toggle="dropdown" class="btn btn-inverse btn-sm dropdown-toggle">
																		<i class="icon-pencil bigger-130"> </i>
																		<span class="icon-caret-down icon-on-right"></span>
																	</button>
					
																	<ul class="dropdown-menu dropdown-info pull-right">
																		<li>
																			{% if ds.is_active == 1 %}
																				<a href="javascript:" onclick="onBtnHandleUser(this,{{ ds.id}},'{{ ds.username }}',0,'active')">取消激活</a>
																			{% else %}
																				<a href="javascript:" onclick="onBtnHandleUser(this,{{ ds.id}},'{{ ds.username }}',1,'active')">激活用户</a>
																			{% endif %}
																		</li>													
																		<li class="divider"></li>					
																		<li>
																			{% if ds.is_superuser == 1 %}
																				<a href="javascript:" onclick="onBtnHandleUser(this,{{ ds.id}},'{{ ds.username }}',0,'superuser')">取消超管权限</a>
																			{% else %}
																				<a href="javascript:" onclick="onBtnHandleUser(this,{{ ds.id}},'{{ ds.username }}',1,'superuser')">激活超管权限</a>
																			{% endif %}
																		</li>
																		
																		<li>
																			<a href="javascript:" onclick="onBtnHandleUser(this,{{ ds.id}},'{{ ds.username }}',0,'delete')">删除用户</a>
																		</li>
																		
																		<li class="#"></li>
					
																		<li>
																			<a href="/user/auth/{{ds.id}}/">配置</a>
																		</li>
																	</ul>
																</div>												
															</div>																			
														</td>

													</tr>
												{% endfor %}
												</tbody>
											</table>
										</div>
									</div>
									
			<div class="modal fade" id="myAddUserModal" tabindex="-1" role="dialog" aria-labelledby="myAddUserModalLabel" aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
								&times;
							</button>
							<h4 class="modal-title" id="myAddUserModalLabel">
								新增用户
							</h4>
						</div>
						<div class="modal-body">
							<form id="register">
												<fieldset>
													<label class="block clearfix">
														<span class="block input-icon input-icon-right">
															<input type="email" class="form-control" placeholder="Email" name="email" />
															<i class="icon-envelope"></i>
														</span>
													</label>

													<label class="block clearfix">
														<span class="block input-icon input-icon-right">
															<input type="text" class="form-control" placeholder="Username" name="username" />
															<i class="icon-user"></i>
														</span>
													</label>

													<label class="block clearfix">
														<span class="block input-icon input-icon-right">
															<input type="password" class="form-control" placeholder="Password" name="password" />
															<i class="icon-lock"></i>
														</span>
													</label>

													<label class="block clearfix">
														<span class="block input-icon input-icon-right">
															<input type="password" class="form-control" placeholder="Repeat password" name="c_password"/>
															<i class="icon-retweet"></i>
														</span>
													</label>


													<div class="space-24"></div>
										
												</fieldset>
											</form>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">关闭
							</button>
							<button type="button" class="btn btn-primary" onclick="userRegister(this,'register')">
								添加
							</button>
						</div>
					</div><!-- /.modal-content -->
				</div><!-- /.modal -->
			</div>						
	</div>	



		<script type="text/javascript">
			if("ontouchend" in document) document.write("<script src='/static/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
		</script>


		<!-- page specific plugin scripts -->

		<script src="/static/js/jquery.dataTables.min.js"></script>
		<script src="/static/js/jquery.dataTables.bootstrap.js"></script>

		<script type="text/javascript">

			jQuery(function($) {
				var oTable1 = $('#sample-table-2').dataTable( {
				"aoColumns": [
			      { "bSortable": false },
			      null, null,null, null, null,
				  { "bSortable": false }
				] } );
				
				
				$('table th input:checkbox').on('click' , function(){
					var that = this;
					$(this).closest('table').find('tr > td:first-child input:checkbox')
					.each(function(){
						this.checked = that.checked;
						$(this).closest('tr').toggleClass('selected');
					});
						
				});
			
			
				$('[data-rel="tooltip"]').tooltip({placement: tooltip_placement});
				function tooltip_placement(context, source) {
					var $source = $(source);
					var $parent = $source.closest('table')
					var off1 = $parent.offset();
					var w1 = $parent.width();
			
					var off2 = $source.offset();
					var w2 = $source.width();
			
					if( parseInt(off2.left) < parseInt(off1.left) + parseInt(w1 / 2) ) return 'right';
					return 'left';
				}
			})
			
			function userRegister(obj,op) {
				var btnObj = $(obj);
				btnObj.attr('disabled',true);
				var required = ['email','username','password','c_password'];
				var server_data = {};
				var form = document.getElementById('register');
				for (var i = 1; i < form.length; ++i) {
					var name = form[i].name;
					var value = form[i].value;	
					idx = $.inArray(name, required);	
					if (idx >= 0 && value.length == 0){
						window.wxc.xcConfirm("请注意必填项不能为空~", window.wxc.xcConfirm.typeEnum.error);
						btnObj.removeAttr('disabled');
						return false;
					}
					else if(  value.length != 0 && name.length != 0 ){
						server_data[name] = value;
					}			
				};			
				server_data['op'] = op;
				$.ajax({
					dataType: "JSON",
					url:'/register/', //请求地址
					type:"POST",  //提交类似
					data:server_data,  //提交参数
					success:function(response){
						btnObj.removeAttr('disabled');
						if (response["code"] == 200){
							window.wxc.xcConfirm(response["msg"], window.wxc.xcConfirm.typeEnum.success);
						}
						else {
							window.wxc.xcConfirm(response["msg"], window.wxc.xcConfirm.typeEnum.error);
						}
						
					},
			    	error:function(response){
			    		btnObj.removeAttr('disabled');
			    		window.wxc.xcConfirm(response["msg"], window.wxc.xcConfirm.typeEnum.error);
			    	}
				})	
			}
			
			function onBtnHandleUser(obj, id,user,status,op){
				var btnObj = $(obj);
				if ( op == 'active'){
					var txt=  "是否确认激活？"
				}
				else if ( op == 'inactive'){
					var txt=  "是否取消激活用户？"
				}
				else if( op == 'superuser' ){
					var txt=  "是否确认授权为超级管理员？"
				}
				else if( op == 'dissuperuser' ){
					var txt=  "是否确认取消超级管理员权限？"
				}
				else if( op == 'delete' ){
					var txt=  "是否确认删除用户？"
				};				
				var option = {
						title: "操作用户("+user+")",
						btn: parseInt("0011",2),
						onOk: function(){
							$.ajax({
								  type: 'POST',
								  url: '/user/auth/'+ id + '/',
								  data:{
										"id":id,
										"op":op,
										"user":user,
										"status":status
									},
							      success:function(response){			            
						                if (response["code"]=="200"){ 
						                	window.wxc.xcConfirm(response["msg"], window.wxc.xcConfirm.typeEnum.success);
	
						                }
							        	else{
							        		window.wxc.xcConfirm(response["msg"], window.wxc.xcConfirm.typeEnum.error);
							        	}						                
								},
					            error:function(response){
					            	window.wxc.xcConfirm("操作失败", window.wxc.xcConfirm.typeEnum.error);
					            },		
								});
						},
						onCancel:function(){	
						},
						onClose:function(){
						}
					}			
				window.wxc.xcConfirm(txt, "custom", option);
		}

</script>
{% endblock %}
